<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-content">
						<form class="form-horizontal m-t" id="signupForm">
							<div th:utext="${csrf.uniqueHiddenField}"></div>
							<input id="id" name="id" th:value="${info?.id}"  type="hidden">
                            <div class="form-group">
                            	<span class="col-sm-3 control-label">
		                            <label style="color:red">*</label>
		                            <label>姓名：</label>
	                            </span> 
								<div class="col-sm-8">
									<input id="name" name="name" th:value="${info?.name}" class="form-control" type="text">
								</div>
							</div>
							<div class="form-group">
								<span class="col-sm-3 control-label">
		                            <label style="color:red">*</label>
		                            <label>年龄：</label>
	                            </span> 
								<div class="col-sm-8">
									<input id="age" name="age"  th:value="${info?.age}" class="form-control"  type="number">
								</div>
							</div>
							<div class="form-group">	
								<span class="col-sm-3 control-label">
		                            <label style="color:red">*</label>
		                            <label>性别：</label>
	                            </span> 
								<div class="col-sm-8">
				                	<select  id="gender" name="gender" class="form-control" title="类型"> 
				                		<option th:selected="${info?.gender eq 1}" value ="1">男</option>
  										<option th:selected="${info?.gender eq 0}" value ="0">女</option>
				                	</select>
				                </div> 
							</div>
							 <div class="form-group" >
							 	<span class="col-sm-3 control-label">
		                            <label style="color:red">*</label>
		                            <label>分组：</label>
	                            </span> 
				                <div class="col-sm-8">
				                	<select  id="groupId" name="groupId" class="form-control" title="类型"></select>
				                </div> 
				                <input id="groupIdValue" th:value="${info?.groupId}" type="hidden">
				            </div>
							 <div class="form-group">
	                         	<span class="col-sm-3 control-label">
		                            <label style="color:red">*</label>
		                            <label>视频源图片：</label>
	                            </span>
	                         	<div class="col-sm-8"> 
			                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="test1" >
			                            <i class="fa fa-chain"></i>上传本地图片
			                        </button> 
			                        <div style="padding-top: 10px;"></div>
			                         <img th:if="${info?.imgPath == null}" width="120px" height="120px"  class="layui-upload-img" id="demo2">
			                         <img th:if="${info?.imgPath != null}" width="120px" height="120px" th:src="${info?.imgPath}" class="layui-upload-img" id="demo2">    
									 <div style="padding-top: 10px;"></div>
									 <input readonly type="text" id="videoImg" name="videoImg" th:value="${info?.ImgPath}" class="form-control" >
								 </div>
							</div>
							<div class="form-group">
								<div class="col-sm-8 col-sm-offset-3">
									<button type="submit" class="btn btn-primary">提交</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
	</div>
	</div>
	<div th:include="include::footer"></div>
	<script type="text/javascript" src="/js/video/user/add.js"></script>
	<script type="text/javascript">
	var files; 
	layui.use('upload', function () {
	    var upload = layui.upload;
	    //执行实例
	    var uploadInst = upload.render({
	        elem: '#test1', //绑定元素
	        auto:false, 
	        acceptMime: 'image/*',
	        size: 1000,
	        multiple:false,
	        number:1,
	        accept: 'images',
	        choose: function(obj){  
	            //将每次选择的文件追加到文件队列 
	            files = obj.pushFile();  
	            //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
	            obj.preview(function(index, file, result){
	            	$('#demo2').attr('src', result); //图片链接（base64） 
	              	$('#videoImg').val(file.name);  
	           });
	        }
	    });
	});
	var csrf_token = $('#csrf_token').val();
	function update() {
		var form = new FormData();  
    	for(i in files){
			form.set("file",files[i]);
		}
		form.append("name",$("#name").val()); 
		form.append('age',$("#age").val());
		form.append('gender',$('#gender option:selected').val());
		form.append('groupId',$('#groupId option:selected').val());
		
		var upId = $("#id").val();
		var askUrl = "/save";
		if(upId){
			askUrl = "/update";
			form.append('id',upId);
		} 
		$.ajax({
			type : "POST",
			url : prefix+askUrl,
			contentType:false,
			processData :false,
			data : form,
			async : false,
			beforeSend: function (xhr) {  
		       xhr.setRequestHeader("_csrf_token", csrf_token);  
		    },
			error : function(request,textStatus,request){
			    if(data.status == 400){
				    layer.msg("请勿重复提交"); 
			    }else{
				    layer.msg("网络异常");  
			    } 
		    },
			success : function(data,textStatus,request) {
				if (data.code == 0) {
					parent.layer.msg("操作成功");
					parent.location.reload();
					var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
					parent.layer.close(index); 
				} else {
					csrf_token = request.getResponseHeader('csrf');
					layer.msg(data.msg);
				}

			}
		}); 
	}
</script>
<script type="text/javascript">
	var prefix = "/video/user"
	$().ready(function(){  
		validateRule(); 
	});

	$.validator.setDefaults({
		submitHandler : function() {
			update();
		}
	}); 

	function validateRule() { 
	    var icon = "<i class='fa fa-times-circle'></i> ";
	    $("#signupForm").validate({
	    	rules : {
	    		name : {
	    			required : true
	            },
	            age : {
	            	required : true,
	            	digits : true,
		            maxlength : 3 
	            }, 
	            gender : {
	            	required : true
	            }, 
	            groupId : {
	            	required : true
	            }, 
	            videoImg : {
	            	required : true
	            } 
	        },
	        messages : {
	        	name : {
	        		required : icon + "请输入姓名"
	            },
	            age : {
	            	required : icon + "请输入年龄",
	            	digits : icon + "请输入正整数",
	            	maxlength : icon + "输入值过大"
	            }, 
	            gender : {
	            	required : icon + "请选择性别"
	            }, 
	            groupId : {
	            	required : icon + "请选择分组" 
	            },
	            videoImg:{
	            	required : icon + "请上传照片"
	            }
	        }
	    })
	} 
</script>
</body>
</html>
